<template>
  <cd-container>
    <!-- // ! 组件库文档请前往：http://cd.hellowxh.com/#/ui  -->
    <template #cd-primary-search>
      <cd-search-form
        v-model:formData="searchParams"
        v-model:page="pages.page"
        :formItems="formItems"
        @search="getTableData"
      >
        <template #customLabelSlot>label自定义插槽</template>
        <template #customSlot>
          <div class="custom-slot">content自定义插槽</div>
        </template>
      </cd-search-form>
    </template>
    <template #cd-primary-header>
      <el-button
        v-if="$auth.hasPermi('role_c')"
        type="primary"
        icon="CirclePlus"
        @click="handleAdd"
      >
        新增
      </el-button>
    </template>
    <template #cd-primary-container>
      <cd-table
        ref="tableRef"
        height="100%"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <!-- 姓名表头 -->
        <template #nameHeader>姓名</template>
        <!-- 姓名 -->
        <template #name="{ row }">
          <span style="font-weight: bold">{{ row.name || '-' }}</span>
        </template>
        <!-- 描述 -->
        <template #desc="{ row }">
          <cd-over-tip :row="row" :text="row.desc" />
        </template>
      </cd-table>
      <cd-pagination
        v-model:page="pages.page"
        v-model:size="pages.size"
        :total="total"
        @change="getTableData"
      />
    </template>
  </cd-container>
</template>

<script setup name="demo1-1">
import { useTable } from 'cd-admin-ui';
import { getRemoteAPI } from '@/api/demo.js';
import { instance, formItems, columns } from './const';
import { setInstance } from '@/utils';

// 查询参数
const searchParams = reactive({});

// 表格hooks
const tableRef = ref();
const { loading, tableData, pages, total, getTableData } = useTable(
  getRemoteAPI,
  {
    tableRef,
    searchParams,
    formItems
  }
);

// 表格选择
const selectList = ref([]);
function handleSelectionChange(val) {
  selectList.value = val || [];
}

// 新增点击事件
function handleAdd() {
  const selected = tableRef.value.cdTableRef.getSelectionRows();
  $msg.success(`已选择${selected.length}个`);
}

// 注入属性
setInstance({ getTableData }, instance);
</script>

<style lang="scss" scoped>
.custom-slot {
  border: 1px solid red;
  flex: 1;
  background-color: #aaa;
  color: #fff;
  box-sizing: border-box;
  height: 32px;
  line-height: 30px;
  text-indent: 10px;
}
</style>
